<template>
  <h2>ref和reactive的使用 及其注意事项</h2>
  <h3>一个人的信息</h3>
  <div>姓名：{{name}}，年龄：{{age}}，工作种类：{{job.type}}，工作薪水：{{job.salary}}</div>
  <button @click="changeInfo">修改人的信息</button>
  <button @click="test">测试emit</button>
  <div>
    <slot name="asd">
      <span>123</span>
    </slot>
  </div>
</template>

<script>

  import {ref,reactive} from 'vue'
  export default {
    name: 'RefComponent',
    beforeCreate() {
      // console.log("beforeCreate")
    },
    //接收了什么参数
    props:{
      msg:{
        type:String
      },
      school:{
        type:String
      },
      school2:{
        type:String
      }
    },
    //接收了什么事件
    emits:{
      hello:{
        type:Function
      }
    },
    // setup执行先于beforeCreate 且setup里面的this为undefined
    // setup参数问题:父子传参props,context里面有attrs,相当于vue2中的$attrs(在vue2中父子传值,这个可以接收父传给子，但子未在props配置项里声明的值),$slot
    setup(props,context){
      console.log(props,context,context.slots)

      // ref 响应式数据  改的时候必须要 .value
      let name = ref('张三')// 创建一个ref的响应式引用对象
      let age = ref(18)    // 基本数据类型:setter getter + Object.defineProperty
      let job = ref({     // 引用对象类型: proxy 代理
        type:'前端工程师',
        salary:'30K'
      })
      let hobby =reactive( ["抽烟","喝酒","打牌"] ) // 这个能处理数组, 也能通过下标直接修改数据(vue2中不行,必须用splice)
      //reactive 针对对象,不能用于基本数据类型(一般也把基本数据类型 塞到对象里{}  以后就用reactive)  基于proxy 代理对象
      let person = reactive({
        type:'vue',
        salary:'6k'
      })
      //方法
      function changeInfo(){
        // 改的时候必须要 .value（中间多了一层.value  奇葩）但是页面{{}}里面无需 .value
        name.value = '李四'
        age.value = 48
        console.log(name,age) // refImpl对象

        console.log(job)
        // 中间多了一层.value
        // job.value.type.value = 'UI设计师'， 为什么不需要再次.value 因为引用对象里面的属性不是用refImpl(ref引用对象)
        job.value.type = 'UI设计师'
        job.value.salary = '60K'
        console.log(job.value) //Proxy对象

        console.log(person.type,person.salary)// 用起来方便  不用.value 了
        // person.type ='xxx'  直接改就行了 不需要以前的$set了
        // person.salary ='xxx' // 直接删除属性 delete person.salary就完了
      }


      function test() {
        context.emit('hello',789)
      }
      //返回一个对象（常用）
      return {
        name,
        age,
        job,
        changeInfo,
        test
      }
    }
  }
</script>

